<template>
  <div class="Practical-Training-list">
    <div
      class="Practical-Training-list-item display-common-horizontal-left"
      v-for="(item, index) in list"
      :key="index"
    >
      <div class="Practical-Training-list-item-img">
        <img
          v-if="!item.coverPath && !item.path"
          src="../../assets/images/cardInfo.png"
          alt=""
        />
        <img v-if="item.coverPath" :src="item.coverPath" />
        <img v-if="item.path" :src="item.path" />
      </div>
      <div class="Practical-Training-list-item-text display-common-vertical-left">
        <div
          class="Practical-Training-list-item-text-title"
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
          "
        >
          <el-tooltip
            class="box-item"
            style="flex: 1"
            :content="item.name ? item.name : item.title"
            :show-arrow="false"
            placement="top-start"
            effect="light"
          >
            <!-- 因为这里公用多种情况所以多种情况的三元表达式判断 -->
            <div
              style="
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
              "
              @click="goDetail(item)"
            >
              {{ item.name ? item.name : item.title }}
            </div>
          </el-tooltip>
          <div
            style="
              width: 270px;
              font-size: 14px;
              color: #707070;
              font-weight: 500;
              text-align: right;
              display: flex;
              align-items: center;
              justify-content: flex-end;
            "
          >
            <el-icon
              v-if="item.baseName"
              style="color: #409eff; width: 20px; height: 20px; font-size: 14px"
              ><Location
            /></el-icon>
            <span
              style="
                font-family: Source Han Sans CN;
                font-weight: 500;
                font-size: 14px;
                color: #343434;
                display: inline-block;
              "
            >
              {{ item.baseName ? item.baseName : "" }}</span
            >

            <div v-if="moduleType === '查看信息'">
              <el-tag :type="item.isRead ? 'success' : 'info'">
                {{ item.isRead ? "已读" : "未读" }}
              </el-tag>
            </div>
          </div>
        </div>
        <!-- <div class="Practical-Training-list-item-text-synopsis">
           因为这里公用多种情况所以多种情况的三元表达式判断
           简介:{{ item.introduction ? item.introduction : item.intro }} 
           <div v-html="item.introduction ? item.introduction : item.intro"></div>
        </div> -->
        <div class="divider"></div>
        <div class="display-common-horizontal-between">
          <!-- 时间 状态 人数 评论 -->
          <div class="display-common-horizontal-left display-common-info">
            <div class="Practical-Training-list-item-text-time">
              <el-icon style="color: #409eff; width: 20px; height: 20px; font-size: 14px"
                ><Timer
              /></el-icon>
              <div v-if="item.createdAt">
                <span class="span-margin">时间:</span>
                {{ formatTimestamp(item.createdAt) }}
              </div>
              <div v-else>
                <span class="span-margin">时间:</span>
                <!-- 有时间就渲染时间 没有就渲染0-0 -->

                {{ item.beginTimeStamp ? formatTimeByDay(item.beginTimeStamp) : 0 }}
                ~
                {{ item.endTimeStamp ? formatTimeByDay(item.endTimeStamp) : 0 }}
              </div>
            </div>
            <div class="Practical-Training-list-item-text-status">
              <el-icon style="color: #409eff; width: 20px; height: 20px; font-size: 14px"
                ><Operation
              /></el-icon>
              <!-- 分多类型 -->
              <div v-if="moduleType === '信息发布'">
                <span class="span-margin">类型:</span>
                <!-- 使用tag标签 -->
                <el-tag
                  effect="plain"
                  :type="
                    item.type === 1
                      ? 'success'
                      : item.type === 2
                      ? 'danger'
                      : item.type === 3
                      ? 'warning'
                      : 'info'
                  "
                >
                  {{
                    item.type === 1
                      ? "实习活动"
                      : item.type === 2
                      ? "企业项目"
                      : item.type === 3
                      ? "竞赛信息"
                      : "平台资讯"
                  }}
                </el-tag>
              </div>
              <div v-else-if="moduleType === '查看信息'">
                <span class="span-margin">类型:</span>
                <!-- 使用tag标签 -->
                <el-tag
                  effect="plain"
                  :type="
                    item.type === 1
                      ? 'success'
                      : item.type === 2
                      ? 'danger'
                      : item.type === 3
                      ? 'warning'
                      : 'info'
                  "
                >
                  {{
                    item.type === 1
                      ? "实习活动"
                      : item.type === 2
                      ? "企业项目"
                      : item.type === 3
                      ? "竞赛信息"
                      : "平台资讯"
                  }}
                </el-tag>
              </div>
              <div v-else>
                <span class="span-margin">状态:</span>
                <!-- 使用tag标签 -->
                <el-tag
                  @click="handleViewsClick(item.id)"
                  style="cursor: pointer; margin-top: -3px"
                  effect="plain"
                  :type="
                    item.statusStr === '已通过'
                      ? 'success'
                      : item.statusStr === '基地管理员审核中'
                      ? 'primary'
                      : 'primary'
                  "
                >
                  {{ item.statusStr }}
                </el-tag>
              </div>
            </div>
            <div
              class="Practical-Training-list-item-text-number"
              v-if="moduleType === '信息发布'"
            >
              <el-icon style="color: #409eff; width: 20px; height: 20px; font-size: 14px"
                ><View
              /></el-icon>
              <span class="span-margin">浏览量:</span>
              <!-- 因为这里公用多种情况所以多种情况的三元表达式判断 -->
              {{ item.read }}
            </div>
            <div
              class="Practical-Training-list-item-text-number"
              v-else-if="moduleType === '查看信息'"
            >
              <!-- <el-badge is-dot class="item">
                <el-button :icon="WarningFilled" size="small" type="success" circle />
                <el-button :icon="SuccessFilled" size="small" type="danger" circle />
              </el-badge> -->
              <el-icon style="color: #409eff; width: 20px; height: 20px; font-size: 14px"
                ><Reading
              /></el-icon>
              <span class="span-margin">已读人数：</span>
              {{ item.read }}
            </div>
            <div class="Practical-Training-list-item-text-number" v-else>
              <el-icon style="color: #409eff; width: 20px; height: 20px; font-size: 14px"
                ><User
              /></el-icon>
              <span class="span-margin">报名人数:</span>
              {{ item.enterNum }}
            </div>
            <!-- <div class="Practical-Training-list-item-text-comment">
              <el-icon><ChatDotSquare /></el-icon>
              <span class="span-margin">评论:</span>
              {{ item.comment }}
            </div> -->
          </div>

          <div v-if="moduleType === '信息发布'" class="join-active">
            <span class="button-common-gradient" @click="joinActive(item.id, 'edit')"
              >编辑</span
            >
            <!-- <el-popover content="编辑当前信息" width="60" trigger="hover" placement="top">
              <template #reference>
                <el-button
                  class="button-common-round"
                  round
                  :icon="Edit"
                  @click="joinActive(item.id, 'edit')"
                ></el-button>
              </template>
            </el-popover> -->

            <span
              class="button-common-gradient"
              style="margin-left: 10px"
              @click="joinActive(item.id, 'show')"
              >查看</span
            >
            <!-- <el-popover content="查看当前信息" width="60" trigger="hover" placement="top">
              <template #reference>
                <el-button
                  class="button-common-round"
                  round
                  :icon="View"
                  style="margin-left: 10px"
                  @click="joinActive(item.id, 'show')"
                ></el-button>
              </template>
            </el-popover> -->
            <!-- <el-button
              class="button-common-round"
              round
              :icon="View"
              style="margin-left: 10px"
              @click="joinActive(item.id, 'show')"
            >
            </el-button> -->

            <el-popconfirm
              title="确定要删除当前信息吗?"
              @confirm.stop="joinActive(item.id, 'delete')"
            >
              <template #reference>
                <span class="button-common-delete" style="margin-left: 10px">删除</span>
                <!-- <el-button
                  round
                  :icon="Delete"
                  class="button-common-round"
                  style="margin-left: 10px"
                ></el-button> -->
              </template>
            </el-popconfirm>
          </div>
          <div v-else-if="moduleType === '查看信息'">
            <span
              class="button-common-gradient"
              style="margin-left: 10px"
              @click="joinActive(item.id, 'show')"
              >查看</span
            >
          </div>
          <div v-else class="join-active">
            <!-- 这里加判断 是老师 企业管理员 学生等展示不同内容 -->
            <span
              v-if="item.isEnd"
              class="button-common-gradient"
              @click="joinActive(item.id)"
              >已结束</span
            >
            <!-- <el-button
              v-if="item.isEnd"
              class="button-common-round"
              round
              :icon="SwitchButton"
              @click="joinActive(item.id)"
            >
            </el-button> -->
            <!-- <el-popover
              content="进入已结束的实习活动"
              :width="40"
              trigger="hover"
              placement="top"
              v-if="item.isEnd"
            >
              <template #reference>
                <el-button
                  :icon="SwitchButton"
                  class="button-common-round"
                  round
                  @click="joinActive(item.id)"
                ></el-button>
              </template>
            </el-popover>

            <el-popover
              content="进入进行中的实习活动"
              :width="40"
              trigger="hover"
              placement="top"
              v-else
            >
              <template #reference>
                <el-button
                  :icon="Right"
                  class="button-common-round"
                  round
                  @click="joinActive(item.id)"
                ></el-button>
              </template>
            </el-popover> -->
            <!-- <el-button
              v-else
              :icon="Right"
              class="button-common-round"
              round
              @click="joinActive(item.id)"
            /> -->
            <span v-else class="button-common-gradient" @click="joinActive(item.id)"
              >进入活动</span
            >
          </div>
        </div>
      </div>
    </div>
    <!-- drawerDialog -->
    <el-drawer v-model="drawerDialog" size="30%" direction="rtl">
      <template #header>
        <div
          style="
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 18px;
            color: #333333;
            display: flex;
            align-items: center;
          "
        >
          <span class="short_blue_line" style="height: 22px; margin-right: 10px"></span>
          活动进度详情
        </div>
      </template>
      <!-- 这里面使用后端返回来的步骤 时间线 color:组件默认成功和失败颜色 -->
      <!-- 具体描述 -->
      <el-timeline style="max-width: 600px">
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :color="activity.isCurrent === true ? '#0bbd87' : '#909399'"
          :hollow="activity.isCurrent === true ? true : false"
          placement="top"
        >
          <div class="process">
            <h4>{{ activity.processName }}</h4>
            <v-text style="color: #909399; margin-top: 10px">{{
              activity.isCurrent === true ? "" : formatTime(activity.processTime)
            }}</v-text>
            <v-text style="color: #909399; margin-top: 3px">{{
              activity.processMessage ? activity.processMessage : ""
            }}</v-text>
            <v-text style="color: #909399; margin-top: 3px" v-if="activity.processAdvice">
              审批意见：{{ activity.processAdvice ? activity.processAdvice : "" }}</v-text
            >
          </div>
        </el-timeline-item>
      </el-timeline>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, defineEmits } from "vue";
import {
  timestampToTime,
  formatTime,
  formatTimestamp,
  formatTimeByDay,
} from "@/utils/timeFormat.js";

import {
  ManageStatusList,
  ExamineStatusList,
  ConfigStatusList,
  ProposeStatusList,
  ReadStatusList,
} from "@/api/common.js";
import {
  Search,
  Timer,
  Operation,
  User,
  ChatDotSquare,
  WarningFilled,
  SuccessFilled,
  Reading,
  MoreFilled,
  Right,
  SwitchButton,
  View,
  Edit,
  Delete,
} from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();
// 接受父组件数据
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  moduleType: {
    type: String,
    default: "",
  },
  isStatusKey: {
    type: String,
    default: "",
  },
});

const activities = ref([]);

//将props中的isStatusKey的值取出来
const isStatusKey = props.isStatusKey;
console.log("isStatusKey的值", isStatusKey);
//需要区分不同模块从父组件传过来的值，点击的时候调用不同的接口
const handleViewsClick = (id) => {
  //根据isStatusKey的值调用不同的接口
  switch (isStatusKey) {
    case "is_manage":
      ManageStatusInfo(id);
      break;
    case "is_examine":
      ExamineStatusInfo(id);
      break;
    case "is_config":
      ConfigStatusInfo(id);
      break;
    case "is_propose":
      ProposeStatusInfo(id);
      break;
    case "is_read":
      ReadStatusInfo(id);
      break;
  }
};

const drawerDialog = ref(false);

//这里的接口可以通过循环来写,调用api,不一个个写,提升代码复用性
const ManageStatusInfo = async (id) => {
  //调用接口
  const res = await ManageStatusList(id);
  if (res.code === 200) {
    //打开drawer
    drawerDialog.value = true;
    //将接口返回的数据赋值给drawerData
    activities.value = res.jobs;
  }
  console.log("调用接口1");
};

const ExamineStatusInfo = async (id) => {
  //调用接口
  const res = await ExamineStatusList(id);
  if (res.code === 200) {
    //打开drawer
    drawerDialog.value = true;
    //将接口返回的数据赋值给drawerData
    activities.value = res.jobs;
  }
  console.log("调用接口2");
};

const ConfigStatusInfo = async (id) => {
  //调用接口
  const res = await ConfigStatusList(id);
  if (res.code === 200) {
    //打开drawer
    drawerDialog.value = true;
    //将接口返回的数据赋值给drawerData
    activities.value = res.jobs;
  }
  console.log("调用接口3");
};

const ProposeStatusInfo = async (id) => {
  //调用接口
  const res = await ProposeStatusList(id);
  if (res.code === 200) {
    //打开drawer
    drawerDialog.value = true;
    //将接口返回的数据赋值给drawerData
    activities.value = res.jobs;
  }
  console.log("调用接口4");
};

const ReadStatusInfo = async (id) => {
  //调用接口
  const res = await ReadStatusList(id);
  if (res.code === 200) {
    //打开drawer
    drawerDialog.value = true;
    //将接口返回的数据赋值给drawerData
    activities.value = res.jobs;
  }
  console.log("调用接口5");
};

const emit = defineEmits(["joinActiveEvent"]);

const envDev = ref("http://localhost:7711");
const joinActive = (id, type) => {
  console.log(id);
  emit("joinActiveEvent", id, type);
  // 跳转到活动详情页 nmae: "activityDetail", params: { id: id }
  // 企业创建实习活动
  // router.push({
  //   name: "activityDetail",
  //   params: { id: id },
  // });

  // //高校负责人审核
  // router.push({
  //   name: "universityOfficials",
  //   params: { id: id },
  // });

  // ElNotification({
  //   message: "加入活动成功",
  //   type: "success",
  //   plain: true,
  // });
};
const goDetail = (item) => {
  if (props.moduleType == "查看信息" || props.moduleType == "信息发布") {
    joinActive(item.id, "show");
  } else {
    joinActive(item.id);
  }
};
</script>

<style lang="scss" scoped>
:deep(.el-timeline-item__node.is-hollow) {
  border-width: 0px;
}
// ::v-deep .el-timeline-item__node.is-hollow {
//   border-width: 0px;
// }
:deep(.el-timeline-item__timestamp.is-top) {
  margin-bottom: 0px;
  padding-top: 0px;
}
// ::v-deep .el-timeline-item__timestamp.is-top {
//   margin-bottom: 0px;
//   padding-top: 0px;
// }
.Practical-Training-list-item:nth-child(1) {
  margin-top: 20px;
}
// .Practical-Training-list-item:nth-last-child(2) {
//   border-bottom: none !important;
// }
.process {
  display: flex;
  flex-direction: column;
}
.Practical-Training-list {
  //当前list列表的默认高度动态计算，根据当前屏幕高度减去header和footer的高度
  // height: calc(100vh - 80px - 160px);

  margin-bottom: 20px;
  box-sizing: border-box;
  .Practical-Training-list-item {
    background: #ffffff;
    border-radius: 0px 0px 0px 0px;
    padding: 20px 22px;
    border-radius: 2px;
    margin-bottom: 10px;
    margin-left: 1px;
    margin-right: 1px;
    border-radius: 10px;
    // box-shadow: 0px 0px 19px 1px rgba(35, 101, 239, 0.2);
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid #ccc;
    // box-shadow: 0px 0px 19px 1px rgba(35, 101, 239, 0.2);
    // box-shadow: 0px 0px 19px 1px rgba(35, 101, 239, 0.2);
    .Practical-Training-list-item-img {
      width: 220px;
      height: 120px;
      border-radius: 5px;
      img {
        height: 100%;
        width: 100%;
      }
    }
    .Practical-Training-list-item-text {
      margin-left: 20px;
      display: flex;
      flex: 1;
      height: 110px;
      flex-direction: column; /* 确保主轴方向是垂直的 */
      justify-content: space-between; /* 使得子元素在容器中垂直方向上均匀分布，两端对齐 */
      .Practical-Training-list-item-text-title {
        margin-bottom: 5px;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: bold;
        font-size: 22px;
        color: #409eff;
        text-align: left;
        font-style: normal;
        text-transform: none;
        cursor: pointer;
        // white-space: nowrap; /* 文本不换行 */
        // 溢出省略
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        width: 700px;
        // margin: 0px 0 16px 0;
      }
      .Practical-Training-list-item-text-synopsis {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        // line-height: 24px;
        color: #707070;
        text-align: left;
        font-style: normal;
        text-transform: none;
        // calc(100% - 266px - 20px-22px);
        width: 892px; /* 定义容器宽度 */
        white-space: nowrap; /* 文本不换行 */
        overflow: hidden; /* 超出容器部分隐藏 */
        text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
      }
      .divider {
        border: 1px solid #f5f7fa;
        width: 100%;
        margin: 20px 0 20px 0;
      }
      .span-margin {
        display: inline-block;
        margin: 0px 2px;
        margin-right: 5px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 14px;
        color: #343434;
      }
      .Practical-Training-list-item-text-time {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #707070;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-right: 30px;
        display: flex;
        align-items: center;
      }
      .Practical-Training-list-item-text-status {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #707070;
        line-height: 24px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-right: 30px;
        display: flex;
        align-items: center;
      }
      .Practical-Training-list-item-text-number {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #707070;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-right: 30px;
        display: flex;
        align-items: center;
      }
      .Practical-Training-list-item-text-comment {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #707070;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-right: 30px;
        display: flex;
        align-items: center;
      }
      .join-active {
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
    }
  }
}
</style>
